<template>
    <div class="container">
        <!-- <v-toolBar
            :fullPath='postData.opera'
            :tableColumns='tableColumns'
            @changeLie='getChangeLie'
            @getSearchIPArr='getToolBarSearchIPArr'
            @getSearchIP='getToolBarSearchIP'>
        </v-toolBar> -->
        <el-table
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            :data="tableData"
            border
            style="width: 100%">
            <template v-for="(item) in tableColumns">
            <el-table-column 
                :prop="item.prop" 
                :label="item.label"   
                :width="item.width"
                align="center"
                v-if="item.isShow"
                :key="item.prop">
                <template v-slot="scope">
                    <template v-if="item.format == 'progress'">
                        <el-progress
                            :percentage="Number(calcCheng(scope.row[item.prop], 100).toFixed(1))" 
                            :color="TalallColorMethod(scope.row)">
                        </el-progress> 
                    </template>
                    <template v-else-if="item.format == 'GB'">
                        <div>
                            {{ scope.row[item.prop] ? scope.row[item.prop] + '&nbsp;GB' : scope.row[item.prop] }}
                        </div>
                    </template>
                    <template v-else>
                        <div>
                            {{ scope.row[item.prop] }}
                        </div>
                    </template>
                </template>
            </el-table-column>
            </template>
        </el-table>
        <!-- <v-pagination
            :dataTotal="dataTotal" 
            :curPage="postData.curPage" 
            :pageSize="postData.pageSize" 
            @getCurPage="getPaginationCurPage"
            @getPageSize="getPaginationPageSize">
        </v-pagination> -->
    </div>
</template>

<script>
import { DBtablespace } from '@/api/index.js'
import vPagination from 'common/Pagination.vue';
import vToolBar from 'common/toolbar/Toolbar.vue';
import tableColumns from './DbTableSpaceTableColumns.js';
import bus from 'common/bus.js';
import Isnull from '@/utils/ObjectIsNull'
export default {
    name: 'dbTableSpace',
     props:{
        info:null
    },
    components: {
        vPagination, vToolBar
    },
    data() {
        return {
            postData: {
                opera: 'dbTableSpace',
                curPage: 1,
                pageSize: 20,
                sort: {
                    sortColumn: '',
                    sortOrders: ''
                },
                filtersType: 'fuzzyquery',
                filters: {}
            },
            tableData: [],
            dataTotal: 0,
            tableColumns: tableColumns,
            SearchIPArr: [],
            searchJson: {},
            SearchIP: '',
            timerName: 'MonitorInfoDataBaseOracleTableSpace',
            timerEventName: 'timerMonitorInfoDataBaseOracleTableSpace',
            // timerInterval: 1000 * 60,
            loading: false
        }
    },
    created() {
        this.getTableData();

        // bus.$emit('timerNewTodo', {
        //     name: this.timerName,
        //     eventName: this.timerEventName,
        //     interval: this.timerInterval,
        //     intervalNow: 0
        // });

        // bus.$on(this.timerEventName, msg => {
        //     if (msg.isGetData) {                
        //         this.getTableData();
        //     }
        // });
    },
    computed: {
        postDataFn() {
            return {
                postData: JSON.stringify(this.postData)
            }
        },
        timerInterval(){
            return Number(this.$store.state.pageRefresh)*1000
        }
    },
    //计算函数未导入
    methods: {
        TalallColorMethod(row) {
            let _color = '#67c23a';
            switch (row.ALERT_LEVEL) {
                case 3:
                    _color = '#f56c6c';
                    break;
                case 2:
                    _color = '#e6a23c';
                    break;
            
                default:
                    break;
            }

            return _color;
        },
        getTableData(){
            this.loading = true;
            
            DBtablespace(
               {ip:this.info.ip,sid:this.info.dbSid}
            ).then((_) => {
                if(!Isnull(_)){
                    this.tableData=_
                }else{
                    this.tableData=[]
                }
               

                this.loading = false;
            });
        },
        
    },
    watch: {
        
    },
    beforeDestroy() {
        // 页面关闭前，移除定时器任务
        bus.$emit('timerNewTodo', {
            name: this.timerName
        });
    },
}
</script>

<style scoped>
    .el-table .warning-row {
    background: oldlace;
  }
    .el-table .success-row {
    background: #f0f9eb;
  }
</style>